<template>
  <div class="resource">
    <div class="resource-top-bg" :style="{ backgroundImage: 'url(https://blog-chen.oss-cn-shanghai.aliyuncs.com/admin_bolg/2024-12-29/c210fb5e71e24c93b941c17c8035d349.png)',
		backgroundRepeat: 'no-repeat' }">
      <h1>网站资源</h1>
    </div>

    <div class="resource-top-type">
      <div  class="type_item" @click="CheckTypeByRes('all')" :class="{'color':chekColor==3000}">
        全部
      </div>
        <div class="type_item" v-for="(item,index) in typeList"
         :key="index" @click="CheckTypeByRes(item.id,index)" :class="{'color':chekColor==index}">
          {{ item.typeName }}
        </div>
    </div>
    <div class="resource-container" v-if="ResourceList.length!=0">
      <div class="img-card" v-for="(item,index) in ResourceList" :key="item.id" :title="item.title">
        <div class="hoverShow">
          <span>
            {{item.payPrice!=0?`${item.payPrice}元`:"免费"}}
          </span>
        </div>
        <div class="img">
          <img :src="item.image" alt="" height="300px" width="360px">
        </div>
        <div style="text-align: center; width: 100%; margin-top: 10px;" class="categoryName">
          <span style="font-size: 20px; font-weight: 700;">
            {{ item.title }}
          </span>
        </div>
        <div class="showBtn">
          <el-button type="primary" @click="gotoResDetail(item)"> 查看详情</el-button>
        </div>
      </div>
    </div>

    <div style="width: 100%;margin: 0 auto;text-align: center;" v-if="ResourceList.length!=0">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.pageNum" :page-sizes="[5,10,15]" :page-size="params.pageSize"
        layout="  prev, pager, next " :total="total">
      </el-pagination>
    </div>
    <noResources v-if="ResourceList.length==0"/>
  </div>
</template>

<script>
import noResources from '@/components/noresources/noResources.vue';
  // 点击效果
  export default {
    components: {
      noResources
    },
    data() {
      return {
        ResourceList: [],
        typeList:[],
        bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/home.png",
        params: {
          pageSize: 12,
          pageNum: 1
        },
        total: 0,
        chekColor:3000
      };
    },
    mounted() {
      this.getList()
      this.getTypeList()
    },
    methods: {
      getTypeList(){
        this.$api.resource.getAllType().then(res => {
          console.log(res);
          if(res.code==200){
            this.typeList=res.data
          }
        })
      },
      getList() {
        this.$api.resource.getResourceList(this.params).then(res => {
          if (res.code == 200) {
            console.log(res);
            this.ResourceList = res.data
            this.total = (res.pageParams.total*1)
          }
        })
      },
      handleSizeChange(pageSize) {
        this.params.pageSize = pageSize
        this.getList()
      },
      handleCurrentChange(pageNum) {
        this.params.pageNum = pageNum
        this.getList()
      },
      gotoResDetail(item) {
        this.$router.push({
          path: '/resourceDetail',
          query: {
            id: item.id
          }
        })
      },
      CheckTypeByRes(item,index){
          console.log(item);
          if(item=="all"){
            this.params.typeId=null
            this.chekColor=3000
            this.params.pageNum=1
          }else{
            this.params.typeId=item
            this.chekColor=index
          }
          this.getList()
      }
    },
    beforeDestroy() {
    }
  };
</script>

<style lang="less" scoped>
  .resource-top-bg {
    min-width: 100%;
    height: 500px;
    /* background: url() no-repeat; */
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position-y: -50px;
    position: relative;
  }
  .color{
    color: aqua!important;;
  }

  .resource-top-bg h1 {
    text-align: center;
    position: relative;
    top: 250px;
    font-size: 30px;
    font-weight: 700;
    // color: white;
  }

  .resource-container {
    width: 1250px;
    min-height: 800px;
    margin: 10px auto;
    display: flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    // justify-content: space-between;

  }
  .resource-top-type{
    width: 1250px;
    margin: 10px auto;
    .type_item{
      display: inline-block;
      height: 15px;
      line-height: 15px;
      padding: 10px;
      border-radius: 18px;
      background: rgb(120, 188, 247) ;
      color: white;
      margin: 5px 10px;
      cursor: pointer;
    }
  }

  .img-card {
    position: relative;
    max-height: 300px;
    width: 260px;
    border-radius: 10px;
    margin: 10px 15px;
    box-shadow: 0px 0px 10px gainsboro;
    cursor: pointer;
  }

  .img-card:hover .hoverShow {
    display: block;
  }

  .img-card:hover .showBtn {
    display: block;
  }


  .img {
    height: 200px;
    width: 260px;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 auto;
  }

  .hoverShow {
    position: absolute;
    height: 30px;
    width: 80px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
    background-color: rgb(64, 158, 255);
    display: none;
  }

  .hoverShow span {
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 30px;
    color: white;
  }



  .showBtn {
    position: absolute;
    top: 101px;
    left: 86px;
    display: none;
  }
  /deep/ .markdown-body {
		background-color: #f8f8f8 !important;
		padding: 0 5px;
		box-shadow: 0 10px 10px gainsboro;

		blockquote {
			border-left: 5px solid #78b6f7;
			padding: 10px;
		}

		pre {
			background: #abada0 !important;
      color: red;
		}

		p code {
			padding: 8px;
			color: red;
			font-size: 15px;
			background-color: #f0f0f0;
		}
	}
  .img img:hover {
    /* transition: all 0.6s linear;
    transform: scale(1.2); */
  }
</style>